<template>
  <div class="header-wrappe">
    <div class="header-left">
      <div class="header-item logo">
        <img src="./logo.png" />
      </div>
    </div>
    <div class="header-middle">
      <div class="header-title">
        <i class="icon iconfont">&#xe67d; </i>
        <input type="text" placeholder="搜索商品名称" />
      </div>
    </div>
    <div class="header-right">
      <router-link tag="div" class="header-item" to="../mine">
        <i class="icon iconfont">&#xe609;</i>
      </router-link>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">


export default {

}

</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
.header-wrappe {
  // z-index: 100;
  display: flex;
  align-items: center;
  height: 0.84rem;
  background: #f2f2f2;
  color: #666;
  padding: 0;

  .header-left {
    margin: auto 0.2rem;

    .logo img {
      width: 0.5rem;
    }
  }

  .header-middle {
    flex: 1;
    font-size: 0.3rem;

    .header-title {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      input {
        border: 0.02rem solid #e5e5e5;
        // border-top: none;
        display: inline-block;
        border-radius: 0.04rem;
        width: 100%;
        height: 0.5rem;
        padding: 0 0.2rem 0 0.35rem;
        outline: none;
        font-size: 0.25rem;
        font-weight: 400;
        line-height: 0.5rem;
        box-shadow: none;
        // &:placeholder {
        // line-height: 0.5rem;
        // }
      }

      i {
        position: absolute;
        padding-left: 0.03rem;
        font-size: 0.3rem;
        width: 0.2rem;
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;

    .header-item {
      margin: 0 0.25rem;

      i {
        font-size: 0.35rem;
      }
    }
  }
}
</style>